/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 .lingc-switch {
  display: flex;
  align-items: center;

  .switch-close {
    transform: scale(1);
    margin-right: 1px;
    position: relative;
    display: inline-block;
    line-height: 0;
    width: 20px;
    height: 20px;
    font-size: 26px;
    color: #858e9e;
    cursor: pointer;

    .span-close-area {
      display: inline-flex;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      justify-content: center;
      align-items: center;

      &:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        height: 100%;
        z-index: 1;
      }
    }
  }

  .switch-box {
    position: relative;

    .switch-span {
      position: relative;
      display: block;
      // height: 8px;
      // width: 16px;
			width: 22px;
			height: 10px;
      float: right;
      background-color: #3f4349;
      border-radius: 8px;
      // transform: translateX(-2px);
      cursor: pointer;

      transform: scale(1);
      margin-right: 1px;

      &::before {
        display: block;
        content: "";
        width: 0;
        height: 100%;
        background: #689df7;
        border-radius: 8px;
				// border-radius: 4px;
      }

      &::after {
        position: absolute;
        display: block;
        content: "";
        // top: -1px;
        // left: -2px;
        // width: 10px;
        // height: 10px;
				top: -2px;
        left: -2px;
        width: 14px;
        height: 14px;
        background: #858e9e;
        border-radius: 50%;
        z-index: 1;
      }

      &.on {
        &::before {
          width: 100%;
          animation: switch_on_width_animate .3s linear backwards;
        }

        &::after {
          background: #e1ebff;
          transform: translateX(100%);
          animation: switch_on_background_animate .3s linear backwards;
        }
      }

      &.off {
        &::before {
          width: 4px;
          animation: switch_off_width_animate .3s linear backwards;
        }

        &::after {
          background: #858e9e;
          animation: switch_off_background_animate .3s linear backwards;
        }
      }
    }
  }

}


@keyframes switch_on_width_animate
{
  0% {
    width:0
  } to {
    width:100%
  }
}

@keyframes switch_off_width_animate {
  0% {
    width:100%
  } to {
    width:0
  }
}

@keyframes switch_on_background_animate{
  0% {
    transform:translateX(0);
    background:#858e9e
  } to {
    transform:translateX(100%);
    background:#e1ebff
  }
}

@keyframes switch_off_background_animate{
  0% {
    transform:translateX(100%);
    background:#e1ebff
  } to {
    transform:translateX(0);
    background:#858e9e
  }
}
